<template>
  <div style="flex:1;" class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_userinfo_id" placeholder='用户编号'
            condition="a.f_userinfo_id = '{}'" v-next-el='username'
            :size="model.f_userinfo_id ? model.f_userinfo_id.length * 2 : 4">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_user_name" placeholder='用户姓名'
            condition="f_user_name = '{}'" v-next-el='address' v-el:username
            :size="model.f_user_name ? model.f_user_name.length * 2 : 4">
          </div>
          <div class="form-group">
            <v-select
              :value.sync="model.f_gasproperties"
              v-model='model.f_gasproperties'
              :options='$parent.$parent.gasproperties'
              placeholder='用气性质'
              condition="f_gasproperties = '{}'"
              close-on-select>
            </v-select>
          </div>
          <!-- <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_area" placeholder='区域'
            condition="u.f_area like '%{}%'" v-el:xq v-next-el='cx' v-el:resentialarea
            :size="model.f_area ? model.f_area.length * 2 : 2">
          </div> -->


          <label for="f_input_date" class="control-label">执行年份</label>
          <div class="form-group">
            <input type="number" class="form-control" v-model="model.f_hand_date" placeholder='年份'
             v-el:xq v-next-el='cx' v-el:resentialarea
            :size="model.f_hand_date ? model.f_hand_date.length : 4">
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="search()" v-el:cx>查询</button>
          </div>
          <div class="form-group">
            <export-excel :data="{year: model.f_hand_date, condition: condition}"  bean="抄表情况导出" sqlurl="rs/logic/exportfile"></export-excel>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
             <th rowspan="3" colspan="1">序号</th>
             <th rowspan="3" colspan="1">用户编号</th>
             <th rowspan="3" colspan="1">用户名称</th>
             <th rowspan="3" colspan="1">用气类型</th>
             <th rowspan="3" colspan="1">期初(上期抄表数)</th>
             <th rowspan="1" colspan="2" >1月</th>
             <th rowspan="1" colspan="2" >2月</th>
             <th rowspan="1" colspan="2" >3月</th>
             <th rowspan="1" colspan="2" >4月</th>
             <th rowspan="1" colspan="2" >5月</th>
             <th rowspan="1" colspan="2" >6月</th>
             <th rowspan="1" colspan="2" >7月</th>
             <th rowspan="1" colspan="2" >8月</th>
             <th rowspan="1" colspan="2" >9月</th>
             <th rowspan="1" colspan="2" >10月</th>
             <th rowspan="1" colspan="2" >11月</th>
             <th rowspan="1" colspan="2" >12月</th>
             <th rowspan="1" colspan="4">合计</th>
          </tr>
          <tr>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1" >抄表数</th>
            <th rowspan="2" colspan="1" >当月用量</th>
            <th rowspan="2" colspan="1">当年用量</th>
            <th colspan="3" rowspan="1">其中</th>
          </tr>
          <tr>
            <th colspan="1" rowspan="1">第一阶梯</th>
            <th colspan="1" rowspan="1">第二阶梯</th>
            <th colspan="1" rowspan="1">第三阶梯</th>
          </tr>
        </template>
        <template partial='body'>
          <th style="text-align: center;">{{$index+1}}</th>
          <th style="text-align: center;">{{row.f_userinfo_id}}</th>
          <th style="text-align: center;">{{row.f_user_name}}</th>
          <th style="text-align: center;">{{row.f_gasproperties}}</th>
          <th style="text-align: center;">{{row.f_tablebase}}</th>
          <th style="text-align: center;">{{row.f_tablebase1}}</th>
          <th style="text-align: center;">{{row.f_oughtamount1}}</th>
          <th style="text-align: center;">{{row.f_tablebase2}}</th>
          <th style="text-align: center;">{{row.f_oughtamount2}}</th>
          <th style="text-align: center;">{{row.f_tablebase3}}</th>
          <th style="text-align: center;">{{row.f_oughtamount3}}</th>
          <th style="text-align: center;">{{row.f_tablebase4}}</th>
          <th style="text-align: center;">{{row.f_oughtamount4}}</th>
          <th style="text-align: center;">{{row.f_tablebase5}}</th>
          <th style="text-align: center;">{{row.f_oughtamount5}}</th>
          <th style="text-align: center;">{{row.f_tablebase6}}</th>
          <th style="text-align: center;">{{row.f_oughtamount6}}</th>
          <th style="text-align: center;">{{row.f_tablebase7}}</th>
          <th style="text-align: center;">{{row.f_oughtamount7}}</th>
          <th style="text-align: center;">{{row.f_tablebase8}}</th>
          <th style="text-align: center;">{{row.f_oughtamount8}}</th>
          <th style="text-align: center;">{{row.f_tablebase9}}</th>
          <th style="text-align: center;">{{row.f_oughtamount9}}</th>
          <th style="text-align: center;">{{row.f_tablebase10}}</th>
          <th style="text-align: center;">{{row.f_oughtamount10}}</th>
          <th style="text-align: center;">{{row.f_tablebase11}}</th>
          <th style="text-align: center;">{{row.f_oughtamount11}}</th>
          <th style="text-align: center;">{{row.f_tablebase12}}</th>
          <th style="text-align: center;">{{row.f_oughtamount12}}</th>
          <th style="text-align: center;">{{row.f_gas}}</th>
          <th style="text-align: center;">{{row.f_gas1}}</th>
          <th style="text-align: center;">{{row.f_gas2}}</th>
          <th style="text-align: center;">{{row.f_gas3}}</th>
        </template>

        <template partial='foot'>
          <th style="text-align: center;">合计</th>
          <th style="text-align: center;"></th>
          <th style="text-align: center;"></th>
          <th style="text-align: center;"></th>
          <th style="text-align: center;">{{model.sums.f_tablebase}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase1}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount1}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase2}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount2}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase3}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount3}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase4}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount4}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase5}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount5}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase6}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount6}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase7}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount7}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase8}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount8}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase9}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount9}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase10}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount10}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase11}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount11}}</th>
          <th style="text-align: center;">{{model.sums.f_tablebase12}}</th>
          <th style="text-align: center;">{{model.sums.f_oughtamount12}}</th>
          <th style="text-align: center;">{{model.sums.f_gas}}</th>
          <th style="text-align: center;">{{model.sums.f_gas1}}</th>
          <th style="text-align: center;">{{model.sums.f_gas2}}</th>
          <th style="text-align: center;">{{model.sums.f_gas3}}</th>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
/**
*用户档案查询列表以及添加操作组件
*/
import { PagedList } from 'vue-client'
import AppData from '../../../../stores/AppData'

export default {
  title: '抄表情况明细表',
  data () {
    return {
      model: new PagedList('rs/sql/meterquery', 50, {year: 'this.model.f_hand_date'}, {f_tablebase: '', f_tablebase1: '', f_oughtamount1: '', f_tablebase2: '', f_oughtamount2: '', f_tablebase3: '', f_oughtamount3: '', f_tablebase4: '', f_oughtamount4: '', f_tablebase5: '', f_oughtamount5: '', f_tablebase6: '', f_oughtamount6: '', f_tablebase7: '', f_oughtamount7: '', f_tablebase8: '', f_oughtamount8: '', f_tablebase9: '', f_oughtamount9: '', f_tablebase10: '', f_oughtamount10: '', f_tablebase11: '', f_oughtamount11: '', f_tablebase12: '', f_oughtamount12: '', f_gas: '', f_gas1: '', f_gas2: '', f_gas3: ''}),
      rows: null
    }
  },
  props: {
    excelurl: {
      type: String
    },
    row: {}
  },
  ready () {
    this.$refs.paged.$refs.cri.model.f_hand_date = new Date().getFullYear()
    this.model.f_hand_date = this.$refs.paged.$refs.cri.model.f_hand_date
    this.search()
  },
  methods: {
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    clean () {
      this.$refs.paged.$refs.grid.select(null)
      this.$dispatch('clean')
    }
  },
  watch: {
    '$refs.paged.$refs.cri.model.f_hand_date' (val) {
      this.model.f_hand_date = val
    }
  },
  computed: {
    gasproperties () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用气性质')]
    }
  }
}
</script>
<style media="screen">
  .divtext {
    min-width: 50px;
    max-width: 200px;
    border: 1px solid green;
    display: inline-block;
  }
</style>
